import React, { useState } from 'react'
import { useSelector } from 'react-redux';
import ImageCropper from './caiimgprocai';
import Matting from './kouimg'
import './imgpro.css'
function Imgpro() {
  const items = useSelector((state) => state.items.items);
  // console.log(items,1111)
  // const selectedItemId = useSelector((state) => state.selectedItemId);
  // console.log(selectedItemId,'id')
  //  // 找到被选中的 item
  //  const selectedItem = items.find((item) => item.id === selectedItemId);
  //  console.log(selectedItem,'item')

  const selectedItem = items[items.length - 1];
  console.log(selectedItem,'000')

  const [croppedImage, setCroppedImage] = useState(null);
  const [showCropper, setShowCropper] = useState(true);
  const [show, setShow] = useState(false);
  const [mshow, setMshow] = useState(false);

  const handleCrop = (croppedImageData) => {
    setCroppedImage(croppedImageData);
    setShowCropper(false); // 关闭裁剪器
  };


  const cai = () => {
    window.location.href = '/cai'
  }
  const kou = () => {
    window.location.href = '/kou'
  }

  return (
    <div className='ipro_box'>

      <div className='ipro_shu'>

        {selectedItem ? (
          <>

            <p>X轴: {selectedItem.x}</p>
            <p>Y轴: {selectedItem.y}</p>
            <p>宽: {selectedItem.width}</p>
            <p>高: {selectedItem.height}</p>

          </>
        ) : null}
      </div>

      <div className='ipro_cai'>
        {/* <button onClick={del}>删除</button> */}
        <button onClick={() => setShow(!show)}>裁剪</button>
        {/* <button onClick={cai}>裁剪</button> */}
        <button onClick={() => setMshow(!mshow)}>抠图</button>
      </div>

      {/* 裁剪 */}
      {show && <div className='imgcro' >
        <h3>裁剪</h3>
        {showCropper && (
          <ImageCropper
          imagesrc={selectedItem.imgUrl} // 假设这里是您的图片 URL
            onCrop={handleCrop}
          />
        )}

        {croppedImage && (
          <div>
            <h3>裁剪后的图片:</h3>
            <img src={croppedImage} alt="裁剪后的图片" />
          </div>
        )}

      </div>}

      {/* 抠图 */}
      {
        mshow &&
        <div className='imgkou' >
          <Matting imageUrl={selectedItem.imgUrl} />
        </div>

      }

    </div>
  )
}

export default Imgpro
